<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		table,
		body,
		div,
		button,
		tr,
		th,
		td {
			padding: 0px;
			margin: 0px;
		}

		.buttons {
			width: 80%;
			margin: 10px auto;
			display: flex;
			justify-content: space-between;
			padding: 10px 0px;
			border: 1px solid black;
			margin-bottom: 10px;
		}

		#table1 {
			width: 100%;
			text-align: center;
		}
	</style>
	<body>

		<div class="buttons"><button>价格从低到高</button><button>价格从高到低</button><button>库存大于10个</button></div>

		<table border="1px" id="table1">
			<tr>
				<th>名称</th>
				<th>价格</th>
				<th>库存</th>
			</tr>
			<tr>
				<td>铅笔</td>
				<td>1</td>
				<td>120</td>
			</tr>
			<tr>
				<td>茶叶</td>
				<td>30</td>
				<td>40</td>
			</tr>
			<tr>
				<td>雪糕</td>
				<td>100</td>
				<td>21</td>
			</tr>
			<tr>
				<td>啤酒</td>
				<td>3</td>
				<td>1000</td>
			</tr>
			<tr>
				<td>车轮</td>
				<td>400</td>
				<td>8</td>
			</tr>
			<tr>
				<td>可乐</td>
				<td>4</td>
				<td>2</td>
			</tr>
			<tr>
				<td>薯片</td>
				<td>8</td>
				<td>53</td>
			</tr>
			<tr>
				<td>砍刀</td>
				<td>15</td>
				<td>30</td>
			</tr>
		</table>


	</body>
	<script>
		// 2、商品列表筛选与排序?
		// 题目：给定一个包含多件商品信息（名称、价格、库存）的 HTML 列表。实现筛选功能：提供 “价格从低到高”“价格从高到低”“库存大于 10” 
		// 的筛选按钮，点击按钮后，通过 DOM 操作更新列表，仅展示符合条件的商品。?
		// 提示：使用querySelectorAll获取商品列表元素，将商品数据转换为 JavaScript 对象数组进行筛选和排序，再通过innerHTML或removeChild、appendChild更新页面展示。
		//2,3,4,5
		const Buttons = document.getElementsByTagName("button")
		const Table = document.getElementById("table1")
		const Title = ["名称", "价格", "库存"]
		const Sesstion = window.sessionStorage;
		const List = [
			["铅笔", 1, 120],
			["茶叶", 30, 40],
			["雪糕", 100, 21],
			["啤酒", 3, 1000],
			["车轮", 400, 8],
			["可乐", 4, 2],
			["薯片", 8, 53],
			["砍刀", 15, 30]
		] //清大
		Buttons[0].flag = 1, Buttons[1].flag = 2, Buttons[2].flag = 3
		Buttons[0].onclick = arrange;
		Buttons[1].onclick = arrange;
		Buttons[2].onclick = arrange;

		function createList(newList) { //创建数组
			Table.innerHTML = "";
			var tr = document.createElement("tr")
			for (var t of Title) {
				var temp = document.createElement("th")
				temp.innerText = t;
				tr.appendChild(temp);
			}
			Table.appendChild(tr);
			if (!newList.length) {
				alert("数组为空!")
				return 0;
			}

			for (var row of newList) {
				//取得行数据
				tr = document.createElement("tr");
				for (var col of row) {
					//取得列数据
					temp = document.createElement("td");
					temp.innerText = col;
					tr.appendChild(temp);
				}
				Table.appendChild(tr);
			}
			return true;
		}

		function arrange() {
			var new_list = List.concat(); //返回新数组,concat连接
			switch (this.flag) {
				case 1:
					new_list.sort((a, b) => {
						return a[1] - b[1];
					})
					break;
				case 2:
					new_list.sort((a, b) => {
						return b[1] - a[1]
					})
					break;
				case 3:
					new_list = List.filter((x) => { //返回新数组
						//内部数组元素
						if (x[2] >= 10) {
							return true;
						}
						return false;

					})
					break;
				default:
					alert("出错")
					return 0;
			}
			console.log(new_list);
			createList(new_list);
		}
	</script>
</html>